<template>
	<view class="notice-content">
		<uni-nav-bar fixed class="unibarS">
			<block slot="left">
				<text>消息</text>
			</block>
			<block slot="right">
				<uni-icons @click="goSearch" type="search" size="26"></uni-icons>
			</block>
		</uni-nav-bar>
		<!--  -->
		<view style="margin-top: 20rpx;">
            <u-cell-group :border="false">
                <u-cell @click="goMessage()" :isLink="true" :border="false" :clickable="false" :icon="'/static/img/notice/notice_1.png'" :iconStyle="{width: '80rpx', height: '80rpx', marginRight: '16rpx'}">
                    <view slot="title" class="u-slot-title" >
                        <text class="u-cell-text">通知提醒</text>
						<view class="box">
							<u-badge numberType="overflow" type="error" max="99" :value="noTotal"></u-badge>
						</view>
					</view>
					<view slot="label" class="u-cell-label">{{ list[0]? list[0].title: '无' }}</view>
                </u-cell>
                <u-cell @click="goNeed()" :isLink="true" :border="false" :clickable="false" :icon="'/static/img/notice/notice_2.png'" :iconStyle="{width: '80rpx', height: '80rpx', marginRight: '16rpx'}">
                    <view slot="title" class="u-slot-title" >
                        <text class="u-cell-text">待办事项</text>
                    </view>
					<view slot="label" class="u-cell-label">全部待办事项通知提醒</view>
                </u-cell>
                <u-cell @click="gotaskList()" :isLink="true" :border="false" :clickable="false" :icon="'/static/img/notice/notice_3.png'" :iconStyle="{width: '80rpx', height: '80rpx', marginRight: '16rpx'}">
                    <view slot="title" class="u-slot-title" >
                        <text class="u-cell-text">超时任务</text>
                    </view>
					<view slot="label" class="u-cell-label">即将超时的任务提醒</view>
                </u-cell>
            </u-cell-group>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			title: 'Hello',
			noTotal: 0,
			list: []
		}
	},
	onShow: function () {
		this.$http.get('/app/notification/list', { pageSize: 1, pageNum: 1, status: 1 }).then(res => {
			console.log(res)
			if (res.code == 200) {
				this.noTotal = res.total
				if(res.total > 0) {
					this.list = res.rows
					uni.setTabBarBadge({ //显示数字  
						index: 3, //tabbar下标
						text: String(res.total) //此处一定要为字符串
					})
				} else {
					uni.removeTabBarBadge({
						index: 3
					});
				}
			} 
		})
	},
	methods: {
		goMessage() {
			uni.navigateTo({
				url: '/pages/notice/message'
			});
		},
		gotaskList() {
			uni.navigateTo({
				url: '/pages/task/taskList'
			});
		},
		goNeed() {
			uni.switchTab({
				url: '/pages/index/index?tabIndex=3',
				success: function(res) { 
					getApp().globalData.tabIndex = 3
				}
			});
		},
		goSearch() {
			uni.navigateTo({
                url: '/pages/other/search'
            });
		},
	}
}
</script>

<style lang="scss" scoped>
	.unibarS {
		/deep/.uni-navbar__header {
			padding: 0 30rpx;
		}
		/deep/.uni-navbar__content {
			background-color: white !important;
			border-bottom: none !important;
			box-shadow: 0px 0px 4px  rgba(136, 136, 136, 0.12);
		}
		/deep/.uni-navbar__header-btns-left {
			font-size: 36rpx;
		}
	}
	/deep/.u-cell__title {
		width: 0;
		margin-right: 60rpx;
		// flex: 1;
	}
	.u-cell-text {
		font-size: 32rpx;
		font-weight: 500;
		color: rgba(0, 0, 0, 1);
	}
	.u-cell-label {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 26rpx;
		font-weight: 400;
		color: rgba(156, 164, 171, 1);
		margin-top: 12rpx;
	}
	.box{
		display: inline-block;
		border-radius: 15px;
		position: relative;
		left: -190rpx;
		top: 0;
	}
</style>
